---
title: 接続ボタン
description: 接続ボタンの使用とカスタマイズ
---

# 接続ボタン

## 接続ボタンの使用とカスタマイズ

これは主要なコンポーネントです。接続/切断ボタンのレンダリングとチェーンスワッピングUIを担当します。

```tsx
import { ConnectButton } from '@rainbow-me/rainbowkit';

export const YourApp = () => {
  return <ConnectButton />;
};
```

> 注意: アプリが必要なプロバイダーでラップされていることを確認してください。[詳細を読む](/docs/installation#wrap-providers).

### プロパティ

`ConnectButton`コンポーネントは、外観をカスタマイズするためのいくつかのプロパティを公開しており、異なる要素の表示を切り替えることができます。

<PropsTable
  data={[
    {
      name: 'label',
      required: false,
      default: 'ウォレットを接続',
      type: 'string',
      description: '接続ボタンに表示されるテキストラベル',
    },
    {
      name: 'accountStatus',
      required: false,
      default: 'full',
      type: '"avatar" | "address" | "full" | { smallScreen: AccountStatus, largeScreen?: AccountStatus }',
      typeSimple: 'enum',
      description:
        "アクティブなアカウントのアバターやアドレスを表示するかどうか",
    },
    {
      name: 'chainStatus',
      required: false,
      default: '{ smallScreen: "icon", largeScreen: "full" }',
      type: '"icon" | "name" | "full" | "none" | { smallScreen: ChainStatus, largeScreen?: ChainStatus }',
      typeSimple: 'enum',
      description:
        "現在のチェーンのアイコンや名前を表示するか、完全に隠すか",
    },
    {
      name: 'showBalance',
      required: false,
      default: '{ smallScreen: false, largeScreen: true }',
      type: 'boolean | { smallScreen: boolean, largeScreen?: boolean }',
      typeSimple: 'enum',
      description:
        'アカウント名の横に残高を表示するかどうか',
    },
  ]}
/>

> 注意: 組み込み`largeScreen`のブレークポイントは`768px`です。

### 例

#### ラベル

`label`プロパティを使用してカスタム`ConnectButton`テキストを設定します。

```tsx
<ConnectButton label="__Sign in__" />
```

#### アカウントステータス

`accountStatus`プロパティを使用するさまざまな方法を紹介します。

アカウントのアバターのみを表示。

```tsx
<ConnectButton accountStatus="__avatar__" />
```

アカウントのアドレスのみを表示。

```tsx
<ConnectButton accountStatus="__address__" />
```

#### チェーンステータス

`chainStatus`プロパティを使用するさまざまな方法を紹介します。

現在のチェーンのアイコンのみを表示。

```tsx
<ConnectButton chainStatus="__icon__" />
```

現在のチェーンの名前のみを表示。

```tsx
<ConnectButton chainStatus="__name__" />
```

チェーンUIを完全に非表示。

```tsx
<ConnectButton chainStatus="__none__" />
```

#### 残高表示

`showBalance`プロパティを使用して残高を表示/非表示にします。

残高を非表示。

```tsx
<ConnectButton showBalance={__false__} />
```

#### レスポンシブ

これらのプロパティもレスポンシブ形式で定義できます。

小さな画面ではアカウントアイコンのみを表示しますが、大きな画面ではアイコンとアドレスを表示します。

```tsx
<ConnectButton
  accountStatus={{
    smallScreen: 'avatar',
    largeScreen: 'full',
  }}
/>
```

小さな画面では残高を非表示にしますが、大きな画面では表示します。

```tsx
<ConnectButton
  showBalance={{
    smallScreen: false,
    largeScreen: true,
  }}
/>
```
